<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('设置默认选中')}`">{{ $t('设置默认选中') }}</t>
            <li>
                配置<span class="d-code">selection</span>即可设置默认选中
            </li>
            <li>当前已选择：<span class="s-code-gray">{{ selections.map(({ myname }) => myname).join('、') || '--' }}</span></li>
        </template>
        <el-button type="primary" @click="visible = true">点击打开树选择器({{ showCheckbox ? '多选' : '单选' }})</el-button>
        <el-button @click="handleCheck">手动勾【飞天老李】</el-button>
        <el-button @click="handleClear">清空勾选</el-button>
        <el-button @click="handleChange">当前为：{{ showCheckbox ? '多选' : '单选' }}</el-button>

        <sib-tree-picker
            v-model="visible"
            node-key="myid"
            :show-checkbox="showCheckbox"
            :selection="selections"
            :props="props"
            :data="treeData"
            @confirm="confirm">
        </sib-tree-picker>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const showCheckbox = ref(true);
        const visible = ref(false);
        const treeData = ref([
            {
                myid: 1,
                myname: 'IT研发部',
                mychildren: [
                    {
                        myid: 11,
                        myname: '前端组',
                        mychildren: [
                            {
                                myid: 111,
                                myname: 'bearsee',
                            },
                            {
                                myid: 112,
                                myname: '摸鱼张三',
                            },
                            {
                                myid: 113,
                                myname: '带薪拉屎老王',
                                mydisabled: true,
                            },
                        ],
                    },
                    {
                        myid: 12,
                        myname: '后端组',
                        mychildren: [
                            {
                                myid: 121,
                                myname: '三炮',
                            },
                            {
                                myid: 122,
                                myname: '飞天老李',
                            },
                        ],
                    },
                ],
            },
        ]);
        // 这里通过节点数据 data 来设置默认选中，也可以通过节点的 node-key 来设置默认选中
        // eslint-disable-next-line prefer-destructuring
        const defaultNodeData = treeData.value[0].mychildren[0].mychildren[1];
        const selections = ref([defaultNodeData]);

        return {
            visible,
            selections,
            showCheckbox,
            treeData,
            props: {
                children: 'mychildren',
                label: 'myname',
                disabled: 'mydisabled',
            },
            confirm(rows) {
                selections.value = rows;
            },
            handleCheck() {
                // 通过节点数据 data 来设置当前选中
                // eslint-disable-next-line prefer-destructuring
                const feiTianLaoLi = treeData.value[0].mychildren[1].mychildren[1];
                selections.value = [feiTianLaoLi];
                // 同样地，也可以通过节点的 node-key 来设置当前选中
                // const feiTianLaoLiKey = treeData.value[0].mychildren[1].mychildren[1].myid;
                // selections.value = [feiTianLaoLiKey];
                visible.value = true;
            },
            handleClear() {
                selections.value = [];
            },
            handleChange() {
                showCheckbox.value = !showCheckbox.value;
            },
            templateString: `<template>
    <div class="example-box">
        <li>当前已选择：<span class="s-code-gray">{{ selections.map(({ myname }) => myname).join('、') || '--' }}</span></li>
        <el-button type="primary" @click="visible = true">点击打开树选择器({{ showCheckbox ? '多选' : '单选' }})</el-button>
        <el-button @click="handleCheck">手动勾【飞天老李】</el-button>
        <el-button @click="handleClear">清空勾选</el-button>
        <el-button @click="handleChange">当前为：{{ showCheckbox ? '多选' : '单选' }}</el-button>
        
        <sib-tree-picker
            v-model="visible"
            node-key="myid"
            :show-checkbox="showCheckbox"
            :selection="selections"
            :props="props"
            :data="treeData"
            @confirm="confirm">
        </sib-tree-picker>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const showCheckbox = ref(true);
        const visible = ref(false);
        const treeData = ref([
            {
                myid: 1,
                myname: 'IT研发部',
                mychildren: [
                    {
                        myid: 11,
                        myname: '前端组',
                        mychildren: [
                            {
                                myid: 111,
                                myname: 'bearsee',
                            },
                            {
                                myid: 112,
                                myname: '摸鱼张三',
                            },
                            {
                                myid: 113,
                                myname: '带薪拉屎老王',
                                mydisabled: true,
                            },
                        ],
                    },
                    {
                        myid: 12,
                        myname: '后端组',
                        mychildren: [
                            {
                                myid: 121,
                                myname: '三炮',
                            },
                            {
                                myid: 122,
                                myname: '飞天老李',
                            },
                        ],
                    },
                ],
            },
        ]);
        // 这里通过节点数据 data 来设置默认选中，也可以通过节点的 node-key 来设置默认选中
        const defaultNodeData = treeData.value[0].mychildren[0].mychildren[1];
        const selections = ref([defaultNodeData]);

        return {
            visible,
            selections,
            showCheckbox,
            treeData,
            props: {
                children: 'mychildren',
                label: 'myname',
                disabled: 'mydisabled',
            },
            confirm(rows) {
                selections.value = rows;
            },
            handleCheck() {
                // 通过节点数据 data 来设置当前选中
                const feiTianLaoLi = treeData.value[0].mychildren[1].mychildren[1];
                selections.value = [feiTianLaoLi];
                // 同样地，也可以通过节点的 node-key 来设置当前选中
                // const feiTianLaoLiKey = treeData.value[0].mychildren[1].mychildren[1].myid;
                // selections.value = [feiTianLaoLiKey];
                visible.value = true;
            },
            handleClear() {
                selections.value = [];
            },
            handleChange() {
                showCheckbox.value = !showCheckbox.value;
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
